{% extends 'base.html' %}
{% block title %}
环境管理
{% endblock %}
{% block content %}
<div class="btn-group">
    <button type="button" class="btn btn-info">{{ product.name }}</button>
    <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">切换下拉菜单</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        {% for pd in products %}
        <li><a href="{{ url_for('wx.environ.env',pk=pd.id) }}">{{ pd.name }}</a></li>
        {% endfor %}
    </ul>
</div>
<div style="float: right">
    <button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#myModal">添加新的环境</button>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">添加环境</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <h4 class="mb-3">添加一个新的环境</h4>
                <form method="post">
                    <div class="mb-3">
                        <label for="name" class="form-label">名称<label style="color: red;">*</label></label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="请输入名称..." autofocus
                            required>
                        <div id="name" class="form-text">输入用例名称</div>
                    </div>
                    <div class="mb-3">
                        <label for="url" class="form-label">地址<label style="color: red;">*</label></label>
                        <input type="text" class="form-control" id="url" name="url" placeholder="请输入地址..." required>
                        <div id="url" class="form-text">输入用例名称</div>
                    </div>
                    <br>
                    <div class="form-actions well well-sm clearfix">
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            <i class="fa fa-undo"></i>
                            取消
                        </button>
                        <button type="submit" class="default btn btn-primary hide-xs">
                            <i class="fa fa-save"></i>
                            增加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 模态框 -->
<br>
<br>
<div class="row">
    {% for env in envs %}
    <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="100" xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="占位符：缩略图">
                <title>Placeholder</title>
                <rect width="100%" height="100%" fill="#55595c"></rect>
                <text x="50%" y="50%" fill="#eceeef" dy=".3em">{{ env.name }}
                </text>
            </svg>
            <div class="card-body">
                <p class="card-text">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">{{ env.url }}</font>
                    </font>
                </p>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                        <a href="{{ url_for('wx.environ.edit_env',pk=env.id) }}">
                            <button type="button" class="btn btn-sm btn-outline-secondary">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">编辑</font>
                                </font>
                            </button>
                        </a>
                    </div>
                    <small class="text-muted">
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">更新时间-{{ moment(env.updated).format('lll') }}</font>
                        </font>
                    </small>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}